<div class="main-container">

    <div nz-row nzGutter="12">
        <div nz-col class="gutter-row" nzSpan="24">
            <div class="gutter-box">
                <nz-card [nzBordered]="false" nzTitle="工程档案详情" [nzExtra]="extraTemplate">
                    <ng-template #extraTemplate>
                        <button nz-button nzType="primary" (click)="onConfirm()">确定</button>
                        <button nz-button nzType="primary" (click)="backToList()">取消</button>
                    </ng-template>
                    <form nz-form [formGroup]="form">
                        <div nz-row [nzGutter]="24">
                            <div nz-col [nzSpan]="6">
                                <nz-form-item nzFlex>
                                    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24">工程名称</nz-form-label>
                                    <nz-form-control nzErrorTip="必填">
                                        <input nz-input formControlName="name" placeholder="工程名称">
                                    </nz-form-control>
                                </nz-form-item>
                            </div>
                            <div nz-col [nzSpan]="6">
                                <nz-form-item nzFlex>
                                    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24">年份</nz-form-label>
                                    <nz-form-control nzErrorTip="必填">
                                        <nz-select formControlName="year" nzPlaceHolder="年份">
                                            <nz-option *ngFor="let item of yearOption" [nzValue]="item" [nzLabel]="item"></nz-option>
                                        </nz-select>
                                    </nz-form-control>
                                </nz-form-item>
                            </div>
                            <div nz-col [nzSpan]="6">
                                <nz-form-item nzFlex>
                                    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24">负责人</nz-form-label>
                                    <nz-form-control nzErrorTip="必填">
                                        <input nz-input formControlName="manager" placeholder="负责人">
                                    </nz-form-control>
                                </nz-form-item>
                            </div>
                            <div nz-col [nzSpan]="6">
                                <nz-form-item nzFlex>
                                    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24">建设地点</nz-form-label>
                                    <nz-form-control nzErrorTip="必填">
                                        <input nz-input formControlName="address" placeholder="建设地点">
                                    </nz-form-control>
                                </nz-form-item>
                            </div>
                            <div nz-col [nzSpan]="6">
                                <nz-form-item nzFlex>
                                    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24">电话</nz-form-label>
                                    <nz-form-control nzErrorTip="必填">
                                        <input nz-input formControlName="telephone" placeholder="电话">
                                    </nz-form-control>
                                </nz-form-item>
                            </div>

                            <div nz-col [nzSpan]="6">
                                <nz-form-item nzFlex>
                                    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24">工程类型</nz-form-label>
                                    <nz-form-control nzErrorTip="必选">
                                        <nz-select formControlName="type" nzPlaceHolder="工程类型">
                                            <nz-option *ngFor="let item of typeOption" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
                                        </nz-select>
                                    </nz-form-control>
                                </nz-form-item>
                            </div>

                            <div nz-col [nzSpan]="12">
                                <nz-form-item nzFlex>
                                    <nz-form-label nzRequired [nzSm]="3" [nzXs]="12">备注</nz-form-label>
                                    <nz-form-control nzErrorTip="必填">
                                        <input nz-input formControlName="remark" placeholder="备注" style="width: 400px;">
                                    </nz-form-control>
                                </nz-form-item>
                            </div>
                        </div>
                    </form>
                </nz-card>

                <nz-card [nzBordered]="false" style="padding:0 20px;">
                    <nz-table
                            #table
                            nzSize="middle"
                            [nzPageSize]="50"
                            [nzHideOnSinglePage]="true"
                            [nzData]="tableData">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>文件名称</th>
                            <th style="width: 400px;">附件</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of table.data">
                            <td>{{ data.num }}</td>
                            <td>{{ data.fileTypeName }}</td>
                            <td>{{ data.fileName }}</td>
                            <td>
                                <a (click)="openFileUploadModal(data)">上传</a>
                                <nz-divider nzType="vertical"></nz-divider>
                                <a (click)="versionManage()">版本管理</a>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-card>
            </div>
        </div>
    </div>

    <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="660" [(nzVisible)]="fileModalShow" [nzTitle]="fileModalTitle"
              (nzOnCancel)="onFileCancel()" (nzOnOk)="onFileConfirm()">
        <form nz-form [formGroup]="fileUploadForm">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSm]="6" [nzXs]="24">版本号</nz-form-label>
                        <nz-form-control>
                            <input nz-input formControlName="version" placeholder="版本号">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <!--<div nz-col [nzSpan]="12">
                  <nz-form-item nzFlex>
                    <nz-form-label [nzSm]="6" [nzXs]="24">文件名</nz-form-label>
                    <nz-form-control>
                      <input nz-input formControlName="name" placeholder="文件名">
                    </nz-form-control>
                  </nz-form-item>
                </div>-->
                <div nz-col [nzSpan]="24" style="padding-bottom: 20px;">
                    <nz-upload
                            nzType="drag"
                            nzFileType="application/pdf"
                            [(nzFileList)]="fileList"
                            (nzChange)="handleChange($event)"
                            [nzAction]="uploadUrl"
                    >
                        <p class="ant-upload-drag-icon">
                            <i nz-icon nzType="inbox"></i>
                        </p>
                        <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                    </nz-upload>
                </div>

            </div>
        </form>
    </nz-modal>
</div>


